<template>
	<view class="item_bg" @tap="check">
		<u-image width="186" height="156" border-radius="20" :src="item.thumb"></u-image>
		<view class="middle_part">
			<view class="title">{{ item.title }}</view>
			<view class="tips">{{ item.tips }}</view>
			<view class="info">
				<text class="price">{{ item.price / 100 }}</text>
				<u-icon name="clock-fill" color="#24C388" size="30"></u-icon>
				<text style="margin-left: 6rpx">{{ item.time }}分钟</text>
			</view>
		</view>
		<view class="right_part">
			<view class="sold">已售{{ sellCount }}</view>
			<view class="btn" @tap.stop="jump">{{ btnText }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "service-item",
	props: {
		item: {
			Type: Object
		},
		btnText: {
			type: String,
			default: "去下单"
		}
	},
	computed: {
		show() {
			return this.item.market_price > this.item.price
		},
		sellCount() {
			let a = this.item.sell_count || 0
			let b = this.item.create_count || 0
			return a + b
		}
	},
	methods: {
		check() {
			vk.navigateTo(`/pages/project/detail?_id=${this.item._id}`)
		},
		// 立即预约
		jump() {
			vk.navigateTo(`/pages/project/shifu?id=${this.item._id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.item_bg {
	border-radius: 12rpx;
	background-color: #fff;
	padding: 24rpx;
	margin: 16rpx 20rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.08);
}

.middle_part {
	flex: 1;
	height: 156rpx;
	padding-left: 22rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.title {
		font-size: 30rpx;
		line-height: 42rpx;
		color: #333333;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.tips {
		color: #999;
		font-size: 24rpx;
	}
	.info {
		color: #999;
		font-size: 24rpx;
	}
	.price {
		color: #ff5555;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 24rpx;
		&::after {
			content: "元/次";
			font-size: 22rpx;
			font-weight: normal;
		}
	}
}

.right_part {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	.btn {
		color: #fff;
		width: 152rpx;
		height: 54rpx;
		background-color: #24c388;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sold {
		font-size: 24rpx;
		line-height: 33rpx;
		color: #999;
		transform: translateY(-20rpx);
	}
}
</style>
